<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">订单信息查询</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm"
						style="width: 200px; right: 700px;">
						<select id="orderType" style="height: 30px;">
							<option id="all" selected="selected">全部订单</option>
							<option id="paid">已支付订单</option>
							<option id="completed">已完成订单</option>
						</select>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>订单编号</th>
							<th>就餐方式</th>
							<th>下单时间</th>
							<th>支付时间</th>
							<th>订单状态</th>
							<th>总价</th>
							<th>修改订单状态</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr>
							<td colspan="7">数据正在加载中...</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix"></div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	// 页面加载完毕就执行 
	$(function() {
		// const关键字用于定义常量,常量不允许多次赋值 
		const pageUrl = "doPageUI";
		// 在pageId对应的位置异步加载pageUrl对应的资源
		// 资源加载完后执行doGetObjects函数,向服务器端发异步请求加载数据
		$("#pageId").load(pageUrl, doGetObjects);
		// 选择下拉选框后发送异步请求加载数据
		$("#orderType").change(doChangeOrderType);
		$("tbody").on("click", ".changeStatus", doChangeStatus)
	});

	function doEditRow(obj, status) {
		var tr = $(obj).parents("tr");
		tr.find("td:eq(4)").text(status ? "已支付" : "已完成");
		//2.获取当前行tr对象，然后重新绑定新的值
		var rowData = tr.data("rowData")
		rowData.orderStatus = status == 1 ? 1 : 2;
		tr.data("rowData", rowData);
		console.log(tr.data("rowData"));
		doGetObjects();
	}

	function doChangeStatus() {
		if (!confirm("确认更改吗?")) {
			return;
		}
		var rowData = $(this).parents("tr").data("rowData");
		var id = rowData.id;
		var newStatus = rowData.orderStatus == 2 ? 1 : 2;
		var params = {
			"id" : rowData.id
		};
		var url = "order/doChangeStatus";
		var btn = $(this);
		$.post(url, params, function(result) {
			if (result.status == 1) {
				alert(result.message);
				doEditRow(btn, newStatus);
			} else {
				alert(result.message);
			}
		});
	}

	function doChangeOrderType() {
		$("#pageId").data("pageCurrent", 1);
		doGetObjects();
	}

	function doSetErrorMsg(msg) {
		// 初始化tbody内容
		var tBody = $("#tbodyId");
		tBody.empty();
		var tr = $("<tr></tr>");
		var td = $("<td></td>");
		td.prop("colspan", 7);
		td.html(msg);
		tr.append(td);
		tBody.append(tr);
		// 初始化page位置内容
		doInitPageination();
	}

	function doInitPageination() {
		$(".rowCount").html("总记录数(0)");
		// 1.2 总页数
		$(".pageCount").html("总页数(0)");
		// 1.3 当前页 
		$(".pageCurrent").html("当前页(1)");
	}

	// 向服务端发起异步请求获取日志记录信息 
	function doGetObjects() {
		// 1.请求的参数
		// 1.1获取页码值 
		var pageCurrent = $("#pageId").data("pageCurrent");
		if (!pageCurrent) {
			pageCurrent = 1;
		}
		var params = {
			"pageCurrent" : pageCurrent
		};
		//var params={"pageCurrent":1};//"pageCurrent"=1
		// 1.2获取查询参数"用户输入的名字"
		var oType = $("#orderType").val();
		if (oType) {
			params.orderType = oType;
		}
		// 2.请求的url
		var url = "order/doFindPageOrders";
		// 3.发送异步请求 并处理请求结果 
		// getJSON为jquery中的一个ajax函数
		// getJSON基于ajax的xhr对象向服务端发异步请求
		// 服务器端的响应结果会经过getJSON函数转换为JSON格式的js对象 
		// getJSON函数最后会将响应结果传递给callback函数 
		/*$.getJSON(url,params,function(result){
			doHandleResponseResult(result);
		});*/
		// 如上调用的简化模式
		$.getJSON(url, params, doHandleResponseResult);
	}

	function doHandleResponseResult(result) {
		console.log("result", result)
		if (result.status == 1) { // ok
			// 1.初始化页面上的日志记录
			doSetTableBodyRows(result.data.records);//records
			// 2.初始化分页页面上的分页信息
			doSetPagination(result.data);//pageObject
		} else { //error
			doSetErrorMsg(result.message);
		}
	}

	function doSetTableBodyRows(records) {
		// 1.获取tbody对象并清空内容
		var tBody = $("#tbodyId");
		tBody.empty();
		// 2.迭代records记录并将其追加到tbody中
		for (var i = 0; i < records.length; i++) {
			// 2.1创建tr对象
			var tr = $("<tr></tr>");
			// 将tr中内容迭代到rowData中
			tr.data("rowData", records[i]);
			// 2.2创建多个td对象
			var tds = doCreateTds(records[i],i);
			// 2.3将td追加到tr中
			tr.append(tds);
			// 2.4将tr追加到tBody中
			tBody.append(tr);
		}
		
	}

	function doCreateTds(row,i) {
		var changeStatus='';
		if(row.orderStatus == 2){
			changeStatus='visibility:hidden;';
		}
		var tds = "<td>" + (++i) + "</td>" + "<td>"
				+ (row.orderEatType == "0" ? "堂食" : "外带") + "</td>" + "<td>"
				+ new Date(row.orderCreatedTime).toLocaleString() + "</td>"
				+ "<td>" + new Date(row.orderPayTime).toLocaleString()
				+ "</td>" + "<td>" + (row.orderStatus == 1 ? "已支付" : "已完成")
				+ "</td>" + "<td>" + row.orderPrice + "</td>"
				+ "<td><button type='button' class='changeStatus' style="+changeStatus+">"
				+ (row.orderStatus == 1 ? "完成订单" : "") + "</button></td>";
		return tds;
	}
</script>





